<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form
				inline
				query
				label-width="70px"
				:model="queryParams"
				:formItem="[
					{ prop: 'likeDeptName', label: '部门名称' },
					{
						itemType: 'select',
						prop: 'status',
						label: '状态',
						list: $store.dict.sysNormalDisable
					}
				]"
				:searchFn="loadData"
			/>
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10" v-hasPermi="['system:dept:add']">
				<el-button type="primary" icon="Plus" @click.prevent="insertFn" v-hasPermi="['system:dept:add']">新增</el-button>
			</div>
			<div class="flex-auto flex-col">
				<my-table
					ref="refTable"
					:data="state.list"
					:columns="state.columns"
					row-key="id"
					lazy
					:load="
						(tree, treeNode, resolve) => {
							state.loadFnResolve.add(tree.id);
							loadLazyData(tree.id, resolve);
						}
					"
					@row-click="
						(row, column, event) => {
							event.currentTarget?.querySelector('.el-table__expand-icon')?.click();
						}
					"
				>
					<template #status="{ row }">
						<div @click.stop="">
							<el-switch
								v-model="row.status"
								inline-prompt
								:active-value="0"
								:inactive-value="1"
								active-text="启"
								inactive-text="停"
								@change="statusFn(row)"
							/>
						</div>
					</template>
					<template #default="{ row }">
						<my-button-text @click.stop="updateFn(row)" v-hasPermi="['system:dept:edit']">修改</my-button-text>
						<my-button-text @click.stop="insertFn(() => (dialog.form.parentId = row.id))" v-hasPermi="['system:dept:add']">新增</my-button-text>
						<my-button-text v-if="!row.hasChildren" @click.stop="deleteFn(row)" v-hasPermi="['system:dept:remove']">删除</my-button-text>
					</template>
				</my-table>
			</div>
		</div>
		<!-- 添加或修改部门对话框 -->
		<el-dialog :title="dialogTitle" v-model="dialog.open" width="600px" append-to-body @closed="resetForm(refDialogForm)">
			<el-form ref="refDialogForm" :model="dialog.form" :rules="rules" label-width="80px" class="validate--bottom">
				<el-row>
					<el-col :span="24">
						<el-form-item label="上级部门" prop="parentId">
							<my-cascader
								v-model="dialog.form.parentId"
								:list="deptOptions"
								:props="{
									expandTrigger: 'hover',
									value: 'id',
									label: 'deptName',
									emitPath: false,
									checkStrictly: true
								}"
								placeholder="选择上级部门"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="部门名称" prop="deptName">
							<my-input v-model="dialog.form.deptName" placeholder="请输入部门名称" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="显示排序" prop="orderNum">
							<my-input-number v-model="dialog.form.orderNum" :min="0" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="负责人" prop="leader">
							<my-input v-model="dialog.form.leader" placeholder="请输入负责人" maxlength="20" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="phone">
							<my-input v-model="dialog.form.phone" placeholder="请输入联系电话" maxlength="11" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email">
							<my-input v-model="dialog.form.email" placeholder="请输入邮箱" maxlength="50" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="部门状态" prop="status">
							<el-radio-group v-model="dialog.form.status">
								<el-radio v-for="dict in $store.dict.sysNormalDisable" :key="dict.dictValue * 1" :label="dict.dictValue * 1">
									{{ dict.dictLabel }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="dialog.open = false">取消</el-button>
				<el-button type="primary" @click="dialogSubmitFn()">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="system/dept">
import { addDept as add, removeDept as remove, editDept as edit, listDept as list } from '@/api/system';

const rules = {
		parentId: [
			{
				required: true,
				message: '上级部门不能为空',
				trigger: 'change'
			}
		],
		deptName: [
			{
				required: true,
				message: '部门名称不能为空',
				trigger: ['blur', 'change']
			}
		],
		orderNum: [
			{
				required: true,
				message: '菜单顺序不能为空',
				trigger: 'change'
			}
		],
		email: [
			{
				type: 'email',
				message: "'请输入正确的邮箱地址",
				trigger: 'change'
			}
		],
		phone: [
			{
				pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
				message: '请输入正确的手机号码',
				trigger: 'change'
			}
		]
	},
	{ queryParams, state, totalList, loadLazyData, refDialogForm, dialog, dialogTitle, loadData, insertFn, deleteFn, updateFn, dialogSubmitFn } =
		treeMixin({
			columns: [
				{
					label: '部门名称',
					prop: 'deptName'
				},
				{
					label: '排序',
					prop: 'orderNum',
					width: 100
				},
				{
					label: '状态',
					prop: 'status',
					width: 120
				},
				{
					label: '负责人',
					prop: 'leader',
					width: 120
				},
				{
					label: '联系电话',
					prop: 'phone',
					width: 150
				},
				{
					label: '邮箱',
					prop: 'email',
					width: 200
				},
				{
					label: '创建时间',
					prop: 'createTime',
					width: 160
				},
				{
					label: '操作',
					width: 160
				}
			],
			loadDataCallback: () => ($store.com.deptTree = []),
			api: { list, remove, add, edit },
			dialogDefault: {
				title: '部门',
				form: {
					id: undefined,
					parentId: '0',
					deptName: '',
					orderNum: 0,
					leader: '',
					phone: '',
					email: '',
					status: 0
				}
			}
		});

const deptOptions = computed(() =>
	totalList.value.length ? [{ id: '0', menuName: '主类目', children: totalList.value }] : [{ id: '0', menuName: '主类目' }]
);

/**
 * 启用、停用
 */
function statusFn(row) {
	if (row.id) {
		const text = row.status === 0 ? '启用' : '停用';
		confirm(`确认要—${text}（${row.deptName}）部门吗?`)
			.then(() => edit(row))
			.then(() => {
				msgSuccess(text + '成功');
			})
			.catch(() => {
				row.status = row.status === 0 ? 1 : 0;
				msgInfo('已取消！');
			});
	}
}
$store.dict.GETsysNormalDisable();
</script>
